/*
 * @Author: hongbin
 * @Date: 2022-12-21 21:09:32
 * @LastEditors: hongbin
 * @LastEditTime: 2022-12-23 11:05:31
 * @Description:动态
 */
import { FC, useCallback, useEffect, useRef, useState } from "react";
import styled, { css } from "styled-components";
import { get, post } from "../../api";
import { useAuth } from "../../context/AuthProvide";
import { UserInfo } from "../../hook/useRegisterForm";
import { showMessage } from "../../HUI/MessageBar";
import { flexCenter, FlexDiv } from "../../styled";
import { mongoIDToDate } from "../../utils";

interface IProps {
    user: UserInfo;
}

interface IDynamic {
    _id: string;
    content: string;
    userId: string;
    userName: string;
    allow: boolean;
}

const Dynamic: FC<IProps> = ({ user }) => {
    const { user: self } = useAuth();
    const [isEditDynamic, setIsEditDynamic] = useState(false);
    const [loading, setLoading] = useState(false);
    const [dynamics, setDynamics] = useState<IDynamic[]>([]);
    const contentRef = useRef<HTMLInputElement>(null);

    const isSelf = user._id == self._id;

    useEffect(() => {
        if (!user._id) return;
        get("/Dynamic/query?id=" + user._id).then((res) => {
            setDynamics(res.data);
        });
    }, [user._id]);

    const sendDynamic = useCallback(async () => {
        if (loading) return;
        const content = contentRef.current?.value;
        if (content) {
            setLoading(true);
            const body = { content, userId: user._id, userName: user.name };
            const { data } = await post<{ data: IDynamic }>("/Dynamic/send", body);
            setLoading(false);
            contentRef.current.value = "";
            setIsEditDynamic(false);
            setDynamics((p) => [data, ...p]);
        }
    }, [loading, user._id, user.name]);

    const delDynamic = useCallback(async (id: string) => {
        const data = await get("/Dynamic/delete?id=" + id);
        console.log(data);
        if (data && data.data) {
            showMessage("删除成功");
            setDynamics((p) => p.filter((p) => p._id != id));
        }
    }, []);

    return (
        <Container>
            <FlexDiv justify="space-between">
                <h3>{isSelf ? "我" : "他"}的动态</h3>
                {isSelf ? (
                    <Button onClick={() => setIsEditDynamic((s) => !s)}> {isEditDynamic ? "取消" : ""}发布</Button>
                ) : null}
            </FlexDiv>
            <InputSection show={isEditDynamic}>
                <input ref={contentRef} placeholder="内容" type="text" className="content" />
                <Button onClick={sendDynamic}>{loading ? "发布中.." : "发布"} </Button>
            </InputSection>
            {dynamics.map((d) => (
                <DynamicItem key={d._id}>
                    <code>{mongoIDToDate(d._id).toLocaleString()}</code>
                    <p>
                        {d.allow ? d.content : "内容违规"}
                        {isSelf ? <button onClick={() => delDynamic(d._id)}>删除</button> : null}
                    </p>
                </DynamicItem>
            ))}
        </Container>
    );
};

export default Dynamic;

const DynamicItem = styled.div`
    background: #26ae0e;
    padding: 0.5vw;
    border-radius: 1vw;
    margin: 0.5vh 0;
    p {
        border-radius: 0.5vw;
        background-color: #1b8f06;
        padding: 0.5vw;
        display: flex;
        justify-content: space-between;
    }
    button {
        background-color: transparent;
        border: none;
        color: #fff;
        font-size: max(13px, 1vw);
        transition: 0.3s;
        cursor: pointer;
        :hover {
            color: #0e4600;
        }
    }
`;

const InputSection = styled.section<{ show: boolean }>`
    height: 0;
    transition: 0.3s;
    overflow: hidden;
    ${({ show }) =>
        show &&
        css`
            height: calc(7vw + 10px);
        `}
    input {
        height: 2vw;
        padding-left: 1vw;
        border: none;
        background: #22ae0d;
        width: 70%;
        transition: 0.3s;
        outline: none;
        border-radius: 1vw;
        color: #fff;
        font-size: min(15px, 1.2vw);
        /* :focus {
            background: #0c4104;
        } */
    }
    input.content {
        font-size: min(18px, 1.5vw);
        height: 4vw;
        margin-top: 10px;
        border-radius: 2vw;
        margin-bottom: 0.5vw;
    }
    input::-webkit-input-placeholder {
        color: #0f8302;
    }
`;

const Button = styled.div`
    color: #4df230;
    border: none;
    border-radius: 1vw;
    width: 10vw;
    height: 2vw;
    background: #009900;
    border: 2px solid #017601;
    ${flexCenter};
`;

const Container = styled.div``;
